import styled from "styled-components";

export const FrameSty = styled.div`
  width: 100%;
`

export const SectionListSty = styled.div`
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100vh;
  scroll-behavior: smooth;
`


export const SectionSty = styled.section`
  scroll-snap-align: start;
  scroll-snap-stop: always;
  view-timeline: --section;
  height: 100vh;  
  width: 100%;
  background: #000;
  .content {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(ellipse at center, #232333 0%,#161616 100%);
    color: #fff;
  
    animation: zoom-scroll ease-in-out both;
    animation-timeline: --section;
  }


  .first{
    &__hint{
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 0px;
    }
  }


  @keyframes zoom-scroll {
    0% {
      filter: blur(5rem);
      transform: scale(0);
      opacity: 0;
      visibility: hidden;
    }
  
    50% {
      filter: blur(0);
      transform: none;
      opacity: 1;
      visibility: visible;
    }
  
    100% {
      filter: blur(3rem);
      transform: scale(1.5);
      opacity: 0;
      visibility: hidden;
    }
  }
`